<template>
	<view class="pCase mt-20 pd-20">
		<view class="ml-20 flex">
			<view class="wh-68" style="flex-shrink: 0;">
				<image class="avtor wh-100" :src="parmas.user_info.avatar" mode="aspectFill"></image>
			</view>
			<view class="right ml-20">
				<view class="ft1 flex">{{ parmas.user_info.nickname }}
					<view class="nameplate ml-20 ft ft-20 c-dbf" v-if="parmas.user_info?.level_info?.id > 1" style="flex-shrink: 0;">{{
						parmas.user_info?.level_info?.name
					}}</view>
				</view>
				<view class="ft mt-12">{{
					parmas.ip_location + " | " + parmas.created_at
				}}</view>
			</view>
			<view style="flex:1;"></view>
			<!--      <image
        style="
          z-index: 1;
          width: 74rpx;
          height: 42rpx;
          margin-bottom: 30rpx;
		  flex-shrink: 0;
        "
        src="https://cdn.oss.bon-top.cn/static_bc/images/more.png"
      ></image> -->
			<view class="positionBox">
				<image @click="parmas.isMore = !parmas.isMore" style="
	        z-index: 1;
	        width: 74rpx;
	        height: 42rpx;
	        margin-bottom: 30rpx;
	      " src="https://cdn.oss.bon-top.cn/static_bc/images/more_p.png"></image>
				<view v-if="parmas.isMore" class="box pd-20">
					<view v-if="parmas.is_my === 0" class="ft c-33 flex-center" @click="goReport(parmas.id, 1)">举报
					</view>
					<view v-else class="ft c-33  flex-center" @click="show = true">删除</view>
				</view>
			</view>
		</view>
		<view class="score mt-20 ml-20 flex">
			<!-- <up-rate active-color="#333333" :value="parmas.star" readonly inactive-color="#D1D1D1" size="14"
				gutter="4"></up-rate> -->
			<comRate ref="comRate" v-if="parmas.star" :num="parmas.star" disabled noVal></comRate>

			<text class="ft ml-24 c-99">{{ parmas.buy_txt }}</text>
		</view>
		<view class="flex ml-20" style="flex-wrap: wrap;" v-if="parmas.tags.length > 0">
			<view class="tcard ft c-66 mr-20 mt-20 flex-center" v-for="tag in parmas.tags" :key="tag.id">
				{{ tag.name }}
			</view>
		</view>
		<view class="ft c-99 pd-20">{{
			parmas.name
		}}</view>
		<view>
			<view class="card2_samll mt-20 pd-20" v-if="parmas.process.length > 0">
				<view class="ft1">历程</view>
				<view class="ft mt-20">
					{{
						parmas.process[0].content
					}}
				</view>
			</view>
			<!-- <view class="card3 mt-20 pd-20" v-if="parmas.sales.length > 0">
				<view class="ft1">顾问</view>
				<view class="flex-bwt" style="flex-wrap: wrap;">
					<view class="consultant mt-20" v-for="(item, index) in parmas.sales" :key="index">
						<view class="title m-20 flex">
							<view class="avtor flex-center mr-20">
								<image class="wh-72" style="border-radius: 50%"
									src="https://cdn.oss.bon-top.cn/static_bc/images/avtor.jpg"></image>
							</view>
							<view class="desc">
								<view class="ft ft-20 c-99">{{ item?.tags[0]?.name }}</view>
								<view class="ft1 mt-10">{{ item.nickname }}</view>
							</view>
						</view>
						<view class="flex-bwt" style="padding-bottom: 20rpx;">
							<text class="ft c-99 ml-20"><text style="color: #333333">{{ item.service_num }}</text>
								{{ " | 服务过" }}</text>
							<view class="mr-20 detail flex-center ft c-33" @click="goTeachaer(item.id)">{{
								"详情"
							}}
							</view>
						</view>
					</view>
				</view>
			</view> -->
			<view class="card4 mt-20 pd-20" v-if="parmas.advise">
				<view class="ft1">建议</view>
				<view class="mt-20 ft">{{
					parmas.advise
				}}</view>
			</view>
			<view class="imgGroup flex" style="flex-wrap: wrap;" v-if="parmas.images && parmas.images.length > 0">
				<image class="group mt-20 mr-20" mode="aspectFill" :src="item" v-for="(item, index) in parmas.images"
					:key="index" @click="openImg(index, parmas.images)"></image>
			</view>
		</view>

		<view class="card5 mt-20 pd-20 ft" v-if="parmas.reply_info">
			{{ parmas.reply_info.user_info.nickname + '回复：' + parmas.reply_info.name }}</view>
		<view class="flex huiAndZan mt-20">
			<view class="flex mr-12" @click="goDetail(parmas.id)">
				<image class="wh-24" src="https://cdn.oss.bon-top.cn/static_bc/images/xiaoxi.png"></image>
				<text class="ft">回复({{ parmas.reply_count }})</text>
			</view>
			<view class="flex" @click="handleZan(parmas.id, parmas.is_like, parmas)">
				<image class="wh-24" src="https://cdn.oss.bon-top.cn/static_bc/images/noGood.png"
					v-if="parmas.is_like == 0"></image>
				<image class="wh-24" src="https://cdn.oss.bon-top.cn/static_bc/images/zan.png" v-else></image>
				<text class="ft">点赞({{ parmas.like_num }})</text>
			</view>
		</view>
		<view class="btn flex-center mt-20" @click="goDetail(parmas.id)">
			<text class="ft mr-12">查看详情</text>
			<image class="wh-24" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png"></image>
		</view>
	</view>
	<up-popup :show="showReport" mode="bottom" :round="20" closeable="true" @close="showReport = false">
		<view class="reportBox pd-20">
			<view class="ft1 flex-center"> 举报</view>
			<view class="list mt-40 pd-20">
				<view class="ft c-33 fw-800">{{ "选择举报类型" }}</view>
				<view class="flex mt-20">
					<view :class="{ active: selectedIndexes.includes(index) }" @click="toggleSelection(item, index)"
						class="item pd-10 mr-20 ft c-66 flex-center" v-for="(item, index) in reportList" :key="index">
						{{ item }} </view>
				</view>
			</view>
			<view class="list mt-40 pd-20">
				<view class="ft c-33 fw-800">{{ "输入举报内容" }}</view>
				<view class="flex mt-20">
					<up-textarea v-model="reportValue" placeholder="请输入内容" count autoHeight></up-textarea>
				</view>
			</view>
		</view>
		<view class="btn_box">

			<view class="sub-report-btn auto mt-20 ft c-dbf flex-center" @click="subReport">
				提交
			</view>
		</view>

	</up-popup>

	<up-modal width="518rpx" @confirm="confirm(parmas.id)" @cancel="cancel" contentTextAlign="center" :show="show"
		:title="title" :showCancelButton="true" :content="content"></up-modal>
</template>
<script lang="js" setup>
import {
	defineProps, ref, defineEmits
} from "vue";
import { utils } from "@/utils/utils.js";
import { api } from "@/utils/api.js";
import comRate from '@/components/comRate.vue'

const props = defineProps({
	parmas: {
		type: Object,
		required: true,
		default: () => ({})
	}
})
let emit = defineEmits(['refresh', 'refreshOne', 'subReport'])
const goDetail = (id) => {
	uni.navigateTo({
		url: '/subpackage/search/detail?id=' + id
	})
}
const showReport = ref(false)
const isMore = ref(false);
const show = ref(false);
const title = ref("清除评价");
const content = ref("确定要删除该条评价吗？");
const reportValue = ref('')
const selectedIndexes = ref([]);
const slectIdxVal = ref([])
function toggleSelection(item, index) {
	const indexOfIndex = selectedIndexes.value.indexOf(index);
	if (indexOfIndex > -1) {
		// 如果已经选中，撤销选中
		selectedIndexes.value.splice(indexOfIndex, 1);
		slectIdxVal.value.splice(indexOfIndex, 1);
	} else {
		// 如果没有选中，添加到选中列表
		selectedIndexes.value.push(index);
		slectIdxVal.value.push(item)

	}
}
const openImg = (index, imgList = []) => {
	uni.previewImage({
		current: index,
		urls: imgList
	});
}
const reportId = ref(null);
const isPingJia = ref(false)
const goReport = (id, num) => {
	showReport.value = true;
	reportId.value = id;
	getReportList()
	if (num && num === 1) {
		isPingJia.value = true;
	}
};


const reportList = ref([])
const getReportList = () => {
	utils
		.request(
			api.getReportOptions,
			{

			},
			"post"
		)
		.then((res) => {
			reportList.value = res.data.options.type_list;
		})
}

const subReport = () => {
	if (isPingJia) {
		utils
			.request(
				api.report
				,
				{
					types: slectIdxVal.value,
					evaluate_id: reportId.value,
					content: reportValue.value

				},
				"post",
				"application/x-www-form-urlencoded;charset=utf-8"
			)
			.then((res) => {
				if (res.code == 200)
					utils.toast('感谢您的举报，举报结果稍后反馈给您！');
				showReport.value = false;
				reportValue.value = ''
				// isMore.value = false
				selectedIndexes.value = [];
				slectIdxVal.value = [];
				isPingJia.value = false;
				emit('subReport')

			})
	}
}

//删除评价
const confirm = (id) => {
	show.value = false;
	utils
		.request(
			api.deleteEvaluate,
			{
				id: id
			},
			"post"
		)
		.then((res) => {
			emit('refresh')
		})
};
const cancel = () => {
	show.value = false;
};
const flag = ref(true)
const zanCount = ref(0)
const zanTime = ref('')
const maxTime = ref(30)
const handleZan = (id, isLike, item) => {
	let time = (parseInt(Date.now()) - parseInt(zanTime.value)) / 1000
	if (time < maxTime.value && zanCount.value > 10) {
		uni.showToast({ title: '操作过于频繁请稍后再试~', icon: 'none' })
		return flag.value = false
	} else if (time > maxTime.value) {
		zanTime.value = ''
		flag.value = true
		zanCount.value = 0
	}
	if (!flag.value) return
	flag.value = !flag.value
	zanCount.value++
	if (!zanTime.value) zanTime.value = Date.now()


	if (isLike == 1) {
		utils
			.request(
				api.cancelLike,
				{
					evaluate_id: id,
				},
				"post"
			)
			.then((res) => {
				// emit('refreshOne')
				item.is_like = 0
				item.like_num--
				flag.value = !flag.value

			})
	} else {
		utils
			.request(
				api.like,
				{
					evaluate_id: id,
				},
				"post"
			)
			.then((res) => {
				// emit('refreshOne')
				item.is_like = 1
				item.like_num++
				flag.value = !flag.value

			})
	}
}

const goTeachaer = (id) => {
	uni.navigateTo({
		url: `/subpackage/teacher/teacherDetail?id=${id}`,
	});
};

</script>

<style lang="scss" scoped>
.ft {
	word-break: break-all;
}

.positionBox {
	//border: #d51010 solid 2rpx;
	position: relative;

	.box {
		position: absolute;
		bottom: -42rpx;
		left: -40rpx;
		z-index: 22;
		width: 128rpx;
		// height: 128rpx;
		background: #fff;
		box-shadow: 0rpx 0rpx 24rpx 2rpx rgba(0, 0, 0, 0.06);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}
}

.pCase {
	width: 690rpx;
	//   height: 1740rpx;
	padding-bottom: 30rpx;
	background: #f8f8f8;
	border-radius: 40rpx 40rpx 40rpx 40rpx;

	.avtor {
		border-radius: 50%;
	}

	.nameplate {
		// width: 88rpx;
		height: 36rpx;
		background: #333333;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		line-height: 36rpx;
		padding: 0 10rpx;
	}

	.tcard {
		padding-left: 20rpx;
		padding-right: 20rpx;
		height: 58rpx;
		background: #f1f1f1;
		border-radius: 34rpx 34rpx 34rpx 34rpx;
	}

	.card1 {
		width: 650rpx;
		height: 362rpx;
		background: #ffffff;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
	}

	.group {
		width: 138rpx;
		height: 174rpx;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
	}

	.card2 {
		width: 650rpx;
		height: 556rpx;
		background: #ffffff;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
	}

	.card2_samll {
		width: 650rpx;
		// height: 168rpx;
		background: #ffffff;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
	}

	.card3 {
		width: 650rpx;
		// height: 298rpx;
		background: #ffffff;
		border-radius: 40rpx 40rpx 40rpx 40rpx;

		.consultant {
			width: 294rpx;
			// height: 198rpx;
			background: #f8f8f8;
			border-radius: 40rpx 40rpx 40rpx 40rpx;

			.avtor {
				width: 88rpx;
				height: 88rpx;
				background: #f8f8f8;
				border: 2rpx solid #dbf046;
				border-radius: 50%;
			}

			.detail {
				width: 88rpx;
				height: 54rpx;
				background: #dbf046;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
			}

			.detail1 {
				width: 116rpx;
				height: 54rpx;
				background: #333333;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
			}
		}
	}

	.card4 {
		width: 650rpx;
		// height: 134rpx;
		background: #ffffff;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
	}

	.card5 {
		width: 650rpx;
		// height: 72rpx;
		background: #f1f1f1;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.huiAndZan {
		width: 100%;
		text-align: right;
		justify-content: flex-end;
	}

	.btn {
		width: 650rpx;
		height: 74rpx;
		background: linear-gradient(180deg,
				rgba(255, 255, 255, 0) 0%,
				#ffffff 100%);
		border-radius: 0rpx 0rpx 40rpx 40rpx;
	}
}

.reportBox {
	// width: 60%;
	height: 800rpx;
	border-radius: 40rpx;
	background: #f8f8f8;

	.list {
		height: 230rpx;
		background: #fff;
		border-radius: 20rpx;

		.item {
			background: #fff5f3;
			border-radius: 20rpx;
		}

		.active {
			background: #333333;
			color: #dbf046;
		}
	}
}

.btn_box {
	padding-bottom: calc(10rpx + env(safe-area-inset-bottom));

	.sub-report-btn {
		width: 690rpx;
		height: 78rpx;
		background: #333333;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}
}
</style>